/**
 * Toast 轻提示系统
 * 非阻塞式用户体验
 */
class Toast {
    constructor() {
        this.container = null;
        this.init();
    }

    init() {
        // 创建Toast容器
        this.container = document.createElement('div');
        this.container.id = 'toast-container';
        this.container.className = 'toast-container';
        document.body.appendChild(this.container);

        // 添加样式
        this.addStyles();
    }

    addStyles() {
        const style = document.createElement('style');
        style.textContent = `
            .toast-container {
                position: fixed;
                top: 20px;
                right: 20px;
                z-index: 10000;
                pointer-events: none;
            }

            .toast {
                background: rgba(0, 0, 0, 0.8);
                color: white;
                padding: 12px 20px;
                border-radius: 8px;
                margin-bottom: 10px;
                font-size: 14px;
                line-height: 1.4;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                transform: translateX(100%);
                opacity: 0;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                pointer-events: auto;
                max-width: 300px;
                word-wrap: break-word;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .toast.show {
                transform: translateX(0);
                opacity: 1;
            }

            .toast.success {
                background: linear-gradient(135deg, #10b981, #059669);
                color: white;
            }

            .toast.error {
                background: linear-gradient(135deg, #ef4444, #dc2626);
                color: white;
            }

            .toast.warning {
                background: linear-gradient(135deg, #f59e0b, #d97706);
                color: white;
            }

            .toast.info {
                background: linear-gradient(135deg, #3b82f6, #2563eb);
                color: white;
            }

            .toast-icon {
                font-size: 16px;
                flex-shrink: 0;
            }

            .toast-message {
                flex: 1;
            }

            .toast-close {
                background: none;
                border: none;
                color: inherit;
                cursor: pointer;
                padding: 0;
                margin-left: 8px;
                opacity: 0.7;
                transition: opacity 0.2s;
                flex-shrink: 0;
            }

            .toast-close:hover {
                opacity: 1;
            }

            /* 移动端适配 */
            @media (max-width: 768px) {
                .toast-container {
                    top: 10px;
                    right: 10px;
                    left: 10px;
                }

                .toast {
                    max-width: none;
                    margin-bottom: 8px;
                }
            }

            /* 暗色主题适配 */
            @media (prefers-color-scheme: dark) {
                .toast {
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                }
            }
        `;
        document.head.appendChild(style);
    }

    show(message, type = 'info', duration = 3000, options = {}) {
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;

        // 图标映射
        const icons = {
            success: 'fas fa-check-circle',
            error: 'fas fa-exclamation-circle',
            warning: 'fas fa-exclamation-triangle',
            info: 'fas fa-info-circle'
        };

        // 构建Toast内容
        toast.innerHTML = `
            <i class="toast-icon ${icons[type] || icons.info}"></i>
            <span class="toast-message">${message}</span>
            ${options.closable !== false ? '<button class="toast-close"><i class="fas fa-times"></i></button>' : ''}
        `;

        // 添加到容器
        this.container.appendChild(toast);

        // 绑定关闭事件
        const closeBtn = toast.querySelector('.toast-close');
        if (closeBtn) {
            closeBtn.addEventListener('click', () => this.remove(toast));
        }

        // 显示动画
        requestAnimationFrame(() => {
            toast.classList.add('show');
        });

        // 自动关闭
        if (duration > 0) {
            setTimeout(() => {
                this.remove(toast);
            }, duration);
        }

        // 点击关闭（可选）
        if (options.clickToClose !== false) {
            toast.addEventListener('click', () => this.remove(toast));
        }

        return toast;
    }

    remove(toast) {
        if (!toast || !toast.parentNode) return;

        toast.classList.remove('show');
        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, 300);
    }

    success(message, duration = 3000, options = {}) {
        return this.show(message, 'success', duration, options);
    }

    error(message, duration = 4000, options = {}) {
        return this.show(message, 'error', duration, options);
    }

    warning(message, duration = 3500, options = {}) {
        return this.show(message, 'warning', duration, options);
    }

    info(message, duration = 3000, options = {}) {
        return this.show(message, 'info', duration, options);
    }

    // 清除所有Toast
    clear() {
        const toasts = this.container.querySelectorAll('.toast');
        toasts.forEach(toast => this.remove(toast));
    }
}

// 创建全局实例
window.toast = new Toast();

// 兼容原有的函数名
window.showSuccess = (message, duration) => window.toast.success(message, duration);
window.showError = (message, duration) => window.toast.error(message, duration);
window.showWarning = (message, duration) => window.toast.warning(message, duration);
window.showInfo = (message, duration) => window.toast.info(message, duration);

// 保留确认对话框，但改为非阻塞式
window.showConfirm = (message, onConfirm, onCancel, title = '确认') => {
    // 创建确认对话框
    const modal = document.createElement('div');
    modal.className = 'confirm-modal-overlay';
    modal.innerHTML = `
        <div class="confirm-modal">
            <div class="confirm-modal-header">
                <h3>${title}</h3>
            </div>
            <div class="confirm-modal-body">
                <p>${message}</p>
            </div>
            <div class="confirm-modal-footer">
                <button class="confirm-btn-cancel">取消</button>
                <button class="confirm-btn-ok">确定</button>
            </div>
        </div>
    `;

    // 添加确认对话框样式
    if (!document.querySelector('#confirm-modal-styles')) {
        const style = document.createElement('style');
        style.id = 'confirm-modal-styles';
        style.textContent = `
            .confirm-modal-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 10001;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .confirm-modal-overlay.show {
                opacity: 1;
            }

            .confirm-modal {
                background: white;
                border-radius: 8px;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
                max-width: 400px;
                width: 90%;
                transform: scale(0.9);
                transition: transform 0.3s ease;
            }

            .confirm-modal-overlay.show .confirm-modal {
                transform: scale(1);
            }

            .confirm-modal-header {
                padding: 20px 20px 0;
            }

            .confirm-modal-header h3 {
                margin: 0;
                font-size: 18px;
                font-weight: 600;
                color: #1f2937;
            }

            .confirm-modal-body {
                padding: 15px 20px;
            }

            .confirm-modal-body p {
                margin: 0;
                color: #6b7280;
                line-height: 1.5;
            }

            .confirm-modal-footer {
                padding: 0 20px 20px;
                display: flex;
                gap: 10px;
                justify-content: flex-end;
            }

            .confirm-btn-cancel,
            .confirm-btn-ok {
                padding: 8px 16px;
                border: 1px solid #d1d5db;
                border-radius: 6px;
                cursor: pointer;
                font-size: 14px;
                transition: all 0.2s;
            }

            .confirm-btn-cancel {
                background: white;
                color: #6b7280;
            }

            .confirm-btn-cancel:hover {
                background: #f9fafb;
                border-color: #9ca3af;
            }

            .confirm-btn-ok {
                background: #3b82f6;
                color: white;
                border-color: #3b82f6;
            }

            .confirm-btn-ok:hover {
                background: #2563eb;
                border-color: #2563eb;
            }
        `;
        document.head.appendChild(style);
    }

    document.body.appendChild(modal);

    // 绑定事件
    const cancelBtn = modal.querySelector('.confirm-btn-cancel');
    const okBtn = modal.querySelector('.confirm-btn-ok');

    const close = () => {
        modal.classList.remove('show');
        setTimeout(() => {
            if (modal.parentNode) {
                modal.parentNode.removeChild(modal);
            }
        }, 300);
    };

    cancelBtn.addEventListener('click', () => {
        close();
        if (onCancel) onCancel();
    });

    okBtn.addEventListener('click', () => {
        close();
        if (onConfirm) onConfirm();
    });

    // 点击遮罩关闭
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            close();
            if (onCancel) onCancel();
        }
    });

    // 显示动画
    requestAnimationFrame(() => {
        modal.classList.add('show');
    });

    return modal;
};
